$(function () {
    //获取table
    let table = $("table:first");
    //获取添加按钮
    let addBtn = $("table th span[id='add']");
    //获取add、return、alter按钮
    let btnAdd = $("form button[id='btn_add']");
    let btnReturn = $("form button[id='btn_return']");
    let btnAlter = $("form button[id='btn_modify']");
    //获取input
    let inputs = $("form input");
    //
    $.ajax({
        url: "data/employee.json",
        method: "post",
        success: function (data,) {
            let tr;
            //自行获取json内容，并添加
            $.each(data, function (index, item) {
                //创建节点
                tr = "<tr>\n" +
                    "                    <td>" + item.ID + "</td>\n" +
                    "                    <td>" + item.Name + "</td>\n" +
                    "                    <td>" + item.Age + "</td>\n" +
                    "                    <td>" + item.Salary + "</td>\n" +
                    "                    <td>\n" +
                    "                        <span class=\"sp_delete btn btn-default\">删除</span>\n" +
                    "                        <span class=\"sp_modify btn btn-default\">修改</span>\n" +
                    "                    </td>\n" +
                    "                </tr>";
                $(table).append(tr);
            });
            //添加
            $(btnAdd).click(function () {
                tr = "<tr>\n" +
                    "                    <td>" + inputs[0].value + "</td>\n" +
                    "                    <td>" + inputs[1].value + "</td>\n" +
                    "                    <td>" + inputs[2].value + "</td>\n" +
                    "                    <td>" + inputs[3].value + "</td>\n" +
                    "                    <td>\n" +
                    "                        <span class=\"sp_delete btn btn-default\">删除</span>\n" +
                    "                        <span class=\"sp_modify btn btn-default\">修改</span>\n" +
                    "                    </td>\n" +
                    "                </tr>";
                $(table).append(tr);
            });
            //清空
            $(btnReturn).click(function () {
                // console.log(3);
                $.each(inputs, function (index, item) {
                    inputs.val("");
                })
            });

            //获取删除和修改按钮
            let btnModify = $("table:first .sp_modify");
            let btnDelete = $("table:first .sp_delete");
            //删除[用这个$("table td")不行，得直接$("table")]
            $("table").on("click", ".sp_delete", function () {
                // console.log(123);
                $(this).parent().parent().remove();
            });
            //修改
            $("table").on("click", ".sp_modify", function () {
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].value = this.parentElement.parentElement.children[i].innerHTML;
                }
                let currentRow = this.parentElement.parentElement.children;
                console.log($(this).parent().parent().index());
                let currentIndex = $(this).parent().parent().index()-1;
                $(btnAlter).click(function () {
                    for (let i = 0; i < inputs.length; i++) {
                        currentRow[i].innerHTML = inputs[i].value;
                    }
                });
            })
        },
        error: function (jqXHR) {
            //
            console.log(jqXHR.status + ":" + jqXHR.responseText);
        },
        dataType:"json",
        contentType:"application/json"
    })
});